<template>
  <div>
    <el-row style="background-color:rgba(236,148,141,.2);margin-top:20px">
      <el-col>
        <div class="topLeft">
          <el-button @click="chaoCai('炒菜')">炒菜</el-button>
          <el-button @click="chaoCai('凉菜')">凉菜</el-button>
          <el-button @click="chaoCai('烧菜')">烧菜</el-button>
          <el-button type="primary" @click="chaoCai('')" style="alert:center"
            >所有菜品</el-button
          >
          <el-button type="primary" @click="insertDate" @selectData="selectAdd"
            >新增菜品</el-button
          >
        </div>
      </el-col>
    </el-row>

    <div class="box">
      <div class="xiao" v-for="item in tableDataXr" :key="item.id">
        <el-image
          fit="contain"
          style="width: 170px; height: 100px"
          :src="'http://localhost:3000/' + item.food_img"
        ></el-image>
        <h2>{{ item.food_name }}</h2>
        <span class="xiaoLeft">￥：{{ item.food_price }}元</span>
        <div class="btn">
          <div class="btnBtn">
            <el-button type="primary" @click="updateFood(item)"
              >修改菜品</el-button
            ><br /><br />
            <el-button type="danger" @click="delFood(item)">删除菜品</el-button>
          </div>
        </div>
      </div><br>

    <el-pagination layout="prev, pager, next" :total="pageSum" :current-page='myCurrent' @current-change='changeCurrentPage'> </el-pagination>

      
    </div>

      <updateTab
        :zhuangrai="updateZhuangtai"
        @close="close"
        :updateData="form"
        :title="title"
        :plain="plain"
      ></updateTab>


    <djlIns :insZt="insZt" @insClose="insClose" @jiazai="selectAdd"></djlIns>
  </div>
</template>

<script>
import dier from "./chongLai";
import * as api from "../utils/api";
import updateTab from "../components/djlUpdateMenu";
import djlIns from "../components/insertCai";
export default {
  data() {
    return {
      show2: true,
      dataList: [],
      updateZhuangtai: false,
      yuyu: false,
      plain: true,
      form: {
        food_action: 0,
        food_create_time: "",
        food_img: "",
        food_name: "",
        food_price: "",
        food_type: "",
        id: 0,
      },
      fromData: [],
      formLabelWidth: "120px",
      title: "新增菜品",
      insZt: false,
      myDjl: {},
      erKaiGuan: false,
      myCurrent:1,
      pageSum:1
    };
  },
  components: {
    updateTab,
    djlIns,
    dier,
  },
  created() {
    this.selectAdd();
  },
  methods: {
    fanzhuang() {
      console.log(1111);
      this.show2 = !this.show2;
    },

    selectAdd() {
      return this.axios({
        method: "get",
        url: api.selectAllFood,
      }).then((data) => {
        this.dataList = data.data.data;
        this.pageSum = this.dataList.length-1
        console.log(this.dataList);
        console.log(this.dataList[1].food_img);
      });
    },

    updateFood(obj) {
      console.log(obj);
      this.form = obj;
      this.title = "更新菜品";
      this.updateZhuangtai = true;
    },

    close() {
      console.log(2132);
      this.updateZhuangtai = false;
    },

    insClose() {
      this.insZt = false;
    },

    delFood(obj) {
      console.log(obj.id);
      this.axios({
        method: "post",
        url: api.DJLDELFOOL,
        data: {
          id: obj.id,
        },
      }).then((data) => {
        console.log(data.data.code);
        console.log(data);
        if (data.data.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.selectAdd();
        } else {
          this.$message({
            message: "删除失败，可能菜品还在使用中",
            type: "warning",
          });
        }
      });
    },

    insertDate() {
      this.title = "增加菜品";
      this.form = {};
      this.insZt = true;
      console.log(this.insZt);
    },

    chaoCai(str) {
      if (str === "") {
        this.selectAdd();
      } else {
        this.selectAdd().then(() => {
          console.log(str);
          console.log();
          let temp = [];
          this.dataList.forEach(
            (item) => item.food_type === str && temp.push(item)
          );
          console.log(temp);
          this.dataList = temp;
        });
      }
    },
    changeCurrentPage(page){
      this.myCurrent = page
      console.log(this.myCurrent)
    }
  },
  computed: {
    tableDataXr() {
      // console.log(this.dataList.splice((this.myCurrent-1)*10,(this.myCurrent)*10))

      return  this.dataList.slice((this.myCurrent-1)*12,(this.myCurrent)*12)
      
    },
  },
};
</script>

<style lang="less" scpoed>
h2 {
  font-size: 20px;
  font-weight: 500;
}

.box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  margin: auto;
}

.xiao {
  width: 170px;
  margin: 20px 20px;
  padding: 20px 0;
  background-color: rgba(236, 148, 141, 0.2);
  position: relative;
  overflow: hidden;
}

.btn {
  position: absolute;
  top: 300px;
  left: 0;
  width: 170px;
  background-color: rgba(0, 0, 0, 0.2);
  height: 300px;
}

.btnBtn {
  margin-top: 50px;
}

el-button {
  margin: 10px;
}

.xiaoLeft {
  float: left;
  margin-left: 15px;
  font-size: 14px;
}

.xiao:hover .btn {
  top: 0;
}

.topLeft {
  float: left;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
}

.topRight {
  width: 400px;
  border: 1px solid red;
  float: right;
}

.el-pagination{
  width: 100%;
  margin: auto;
}
</style>
